<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.div1{
				width: 600px;
				height: 600px;
				background-color: yellow;
			}
			.div2{
				width: 400px;
				height: 400px;
				background-color: greenyellow;
				position: absolute;/*绝对定位*/
				left: 100px;
				top: 50px;
			}
			
			.div3{
				width: 200px;
				height: 200px;
				background-color: grey;
				position: absolute;
				left: 600px;
				top: 0px;
			}
			.div4{
				width: 500px;
				height: 500px;
				background-color: red;
				 position: relative;/* 为了让子元素以当前元素为 基准进行偏移*/
				left: 100px;
			}
			
			.div5{
				width: 100px;
				height: 100px;
				border-radius: 50px;
				 background-color: yellowgreen; 
				 
				position: absolute;
				left: 10px;
				top: 10px;
			}
		</style>
		
	</head>
	<body>
		 <!--
         	 绝对定位
         	   position ： absolute  
         	   1、绝对 定位的元素会脱离文档流   
         	   2、参考最近的拥有position 属性的父元素 进行定位 ，（positicn的值不能时static）
         	   3、如果没有父元素或没有position属性，则以窗口的顶点偏移
         -->
		<div class="div1">
			
		</div>
		<div class="div4">
			<div class="div2">
						
			</div>
					
		</div>
		<div class="div3">
			
		</div>
		
		<div class="div5"></div>
				
				
	</body>
</html>
